<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>谷歌验证</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">谷歌验证</li>
            </ul>
            <div class="layui-tab-content">
                <style>
                    .center {
                        width: 60%;
                    }
                </style>
                <div class="layui-card layui-hide bandStatus">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-cyan">第一步：下载Google身份验证APP</span></div>
                    <div class="layui-card-body">
                        <div id="yesBind" style="display: none">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>已绑定: 您已绑定谷歌验证</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=22417419&from=as" style="text-decoration:underline" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" style="text-decoration:underline" target="_blank">IOS</a></div>
                                </div>
                            </div>
                        </div>
                        <div id="noBind" style="display: none">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>未绑定: 您未绑定谷歌验证</span><br>
                                    <span style="color: orangered;">提示:为了您的资金安全,请尽快绑定谷歌验证码!</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=22417419&from=as" style="text-decoration:underline" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" style="text-decoration:underline" target="_blank">IOS</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-hide bandStatus">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-cyan">第二步：在Google身份验证中添加秘钥，获取授权码</span></div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div style="margin-bottom: 10px;">
                                    请使用Google身份验证器扫描下方二维码
                                </div>
                                <img id="googleQrCode" src="">
                            </div>
                            <div class="layui-col-md6">
                                <div style="margin-top: 10%">
                                    扫描不了？使用手机号+秘钥获取</br>
                                    账号：<span id="phone"></span></br>
                                    秘钥：<span id="googleKey"></span></br></br>
                                    <!--<span style="color: #cc0000;font-size: x-small">若未绑定秘钥未显示，请刷新页面。</span></br>-->
                                    <span style="color: #cc0000;font-size: x-small">绑定成功后秘钥将不再展示，请自行备份保存。</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form class="layui-form center layui-hide bandStatus">
                    <div class="layui-card">
                        <div class="layui-card-header"><span class="layui-badge layui-bg-cyan">第三步：输入Google验证器中验证码</span></div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div>
                                    <input type="text" style="width: 20%" required id="googleAuthCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" style="margin-left: 45%;margin-top: 2%" id="btnBind" lay-filter="btnBind" lay-submit class="layui-btn layui-btn-normal layui-hide">绑定</button>
                            <span style="margin-left: 45%;margin-top: 2%" class="layui-btn layui-btn-warm layui-hide already">已绑定Google验证器</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
   layui.use(['table','laytpl','admin',], function(){
        var form = layui.form
            ,laytpl = layui.laytpl
            ,table = layui.table
            ,$ = layui.$
            ,admin = layui.admin
            ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息
       $.refresh = function() {
           admin.req({
               type: 'get',
               url:  layui.setter.baseUrl + '/current' //模拟基本信息接口,
               ,error: function(err){
                   console.log(err)
               },
               success: function(res){
                   if(res.code == 0){
                       // 谷歌验证绑定
                       var googleAuthStatus = res.data.googleAuthStatus;
                       $('#phone').html(res.data.mobile);
                       if(googleAuthStatus == 1) {
                           $('#yesBind').show();
                           $('#noBind').hide();
                           $('.already').removeClass("layui-hide");
                           $('.bandStatus').removeClass("layui-hide");
                           $('#googleAuthCode').remove();
                       }else if(googleAuthStatus == 0) {
                           $('#btnBind').removeClass("layui-hide");
                           $('.bandStatus').removeClass("layui-hide");
                           $('#yesBind').hide();
                           $('#noBind').show();
                           $('#googleKey').html(res.data.googleAuthSecretKey);
                       }
                       // 请求获取谷歌验证码
                       admin.req({
                           type: 'post',
                           url: layui.setter.baseUrl + '/security/google_qrcode',
                           success: function(res){
                               $("#googleAuthCode").val('');
                               if(res.code == 0){
                                   $('#googleQrCode').attr("src", res.data.qrcodeUrl);
                                   if (googleAuthStatus == 0) {
                                       $('#googleKey').html(res.data.googleAuthSecretKey);
                                   }
                               }
                           }
                       });

                       form.render();
                   }
               }
           });

       };

       $.refresh();

       form.on('submit(btnBind)', function(data){
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/google_bind',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, function(index){
                           layer.close(index);
                           $('#googleKey').html("");
                           $('#btnBind').addClass("layui-hide");
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

    });

</script>